@namespace Bit.BlazorUI
@inherits BitComponentBase

<div @ref="RootElement" @attributes="HtmlAttributes"
     id="@_Id"
     type="button"
     aria-label="@AriaLabel"
     style="@StyleBuilder.Value"
     class="@ClassBuilder.Value"
     dir="@Dir?.ToString().ToLower()"
     tabindex="@(IsEnabled ? 0 : -1)">
    <button @onclick="HandleOnClick"
            type="button"
            style="@Styles?.Button"
            class="bit-drm-btn @Classes?.Button">
        @if (Template is not null)
        {
            @Template
        }
        else
        {
            @if (IconName.HasValue())
            {
                <i style="@Styles?.Icon" class="bit-drm-icn bit-icon bit-icon--@IconName @Classes?.Icon" />
            }

            @if (Text.HasValue())
            {
                <div style="@Styles?.Text" class="bit-drm-txt @Classes?.Text">
                    @Text
                </div>
            }

            <i style="@Styles?.ChevronDown"
               class="bit-icon bit-icon--@(ChevronDownIcon ?? "ChevronRight bit-ico-r90") @Classes?.ChevronDown" />
        }
    </button>

    <div @onclick="CloseCallout" @onclick:stopPropagation
         style="display:@(IsOpen ? "block" : "none");@Styles?.Overlay"
         class="bit-drm-ovl @Classes?.Overlay"></div>

    <div id="@_calloutId"
         style="@Styles?.Callout"
         class="@GetCalloutCssClasses()">
        @(Body ?? ChildContent)
    </div>
</div>